<template>
	<view class="page-tabbar" :style="[indexStyle, deviceWidth ? { width: deviceWidth + 'px' } : '']">
		<view class="nav-logo" v-if="pageCur!=='more'"
			style="background: rgb(255, 255, 255);display: flex;justify-content:space-between; align-items:center; position: relative;">
			<image class="logo-image" src="@/static/logo.jpg" mode="widthFix" />
			<image class="logo-image" src="@/static/switch.png" @click="changeWinningStyle" mode="widthFix" />
					<!-- <view class="switch_style" @click="changeWinningStyle">切換開獎風格</view> -->
		</view>
		<block v-if="pageCur=='home'">
			<Home ref="home" :navigatoMy="navigatoMy" />
		</block>
		<block v-if="pageCur=='more'">
			<More ref="more" />
		</block>
		<!-- 	<block v-if="pageCur=='live'">
			<Live ref="live" />
		</block> -->
		<block v-if="pageCur=='DrawPrize'">
			<DrawPrize ref="DrawPrize" />
		</block>
		<block v-if="pageCur=='challenge'">
			<Challenge ref="challenge" />
		</block>
		<block v-if="pageCur=='MultipleBets'">
			<MultipleBets ref="MultipleBets" />
		</block>
		<Tabbar ref="tabbar" @change="navChange" />
	</view>
</template>

<script>
	import Home from './home'
	import More from './more'
	import Live from './live'
	import DrawPrize from './DrawPrize'
	import Challenge from './challenge'
	import MultipleBets from './MultipleBets'
	import Tabbar from './component/tabbar'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		components: {
			Home,
			More,
			Live,
			DrawPrize,
			Challenge,
			Tabbar,
			MultipleBets
		},
		data() {
			return {
				pageCur: 'home',
				deviceWidth: null,
			}
		},
		computed: {
			...mapState(['fixed']),
			indexStyle() {
				console.log(this.fixed, "this.fixedthis.fixed")
				if (this.fixed) {
					return `position: fixed`
				} else {
					return {}
				}
			}
			// scrollHeight() {
			// 	const safeBottom = uni.$u.sys().safeAreaInsets ? uni.$u.sys().safeAreaInsets.bottom : 0
			// 	const tabbarHeight = uni.upx2px(100) + safeBottom
			// 	let sHeight = uni.$u.sys().windowHeight - uni.$u.sys().statusBarHeight - 44 - tabbarHeight
			// 	return sHeight + 'px'
			// },
			// ...mapState(['userInfo'])
		},
		onPullDownRefresh() {
			const page = this.pageCur
			switch (page) {
				case 'home':
					this.$refs.home.onRefresh()
					break;
				case 'more':
					this.$refs.more.onRefresh()
					break;
				case 'live':
					this.$refs.live.onRefresh()
					break;
				case 'DrawPrize':
					this.$refs.DrawPrize.onRefresh()
					break;
				default:
					break;
			}
		},
		onLoad() {
			// this.scoket()
			this.getDeviceWidth()
		},
		onReachBottom() {
			// if (this.pageCur === 'work') {
			// 	if (this.$refs.work.transaction === 'buy') {
			// 		this.$refs.work.buypage++
			// 		this.$refs.work.getBuy()
			// 	} else {
			// 		if (this.$refs.work.activeIndex == '当前委托') {
			// 			this.$refs.work.page++
			// 			this.$refs.work.gettradeOrder()
			// 		}
			// 	}
			// }
		},
		methods: {
			...mapActions(['changeWinningStyle']),
			navigatoMy() {
				this.pageCur = 'more'
			},
			navChange(e) {
				this.pageCur = e
			},
			getDeviceWidth() {
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.screenWidth;

				// 判断是否为PC设备
				if (screenWidth >= 768) {
					this.deviceWidth = 350; // 如果是PC，使用默认宽度350px
				} else {
					this.deviceWidth = null; // 如果是手机，使用实际屏幕宽度
				}
				console.log(this.deviceWidth);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page-tabbar {
		// width: 50%;
		// height: 100vh;
		// position: fixed;
		// height: calc(100vh - 82.297px);
		// box-sizing: border-box;
		// width: 350px;
		margin: 0 auto;

		// overflow: hidden;
		// position: fixed;
		.nav-logo {
			padding: 0 5px;
			display: flex;
			align-items: center;

			.logo-image {
				width: 90px;
				height: 20px;
			}

			.switch_style {
				// width: 180rpx;
				// height:60rpx;
				display: inline-block;
				font-style: normal;
				border-radius: 3px;
				padding: 1.2px 2.5px;
				color: #fff;
				background: #1a3d96;
				font-size: 15px;
				text-align: center;
				line-height: 60rpx;
				cursor: pointer;
			}
		}
	}

	page {
		padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
	}

	.tips {
		font-size: $u-font-md;
	}
</style>